<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <<link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">
</head>
<!--url('../../images/bg.jpg')-->
<body style="background:beige no-repeat; background-size: cover;">
<div id="wrapper">
    <div style="width: 500px; margin: 150px auto; background-color:rgba(100,149,237,0.5); border-radius: 10px">
        <div style="width: 100%; height: 100px; font-size: 30px;line-height: 100px; text-align: center; color: darkblue">医院输血管理系统</div>
        <div style="margin-top: 25px; width: 100%; height: 320px;">
            <div style="width: 60%; margin: 0 auto">
                <input v-model="user.jobnum" type="text" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 100%" placeholder="请输入账号">
                <input v-model="user.password" type="password" style="border: 1px solid #ccc; height: 40px; padding: 10px; width: 100%; margin-top: 25px" placeholder="请输入密码">
                <div style="margin-top: 25px; line-height: 40px">
                    <input v-model="user.code" type="text" style="border: 1px solid #ccc; padding: 10px; width: 65%; " placeholder="请输入验证码">
                    <div id="picyzm" style="display: inline-block; height: 35px; vertical-align: middle;"></div>
                </div>

                <button @click="login" style="height: 40px; padding: 10px; width: 100%; margin-top: 25px; background-color: steelblue; color: white">登录</button>
                <a style="width: 100%; text-align: right; display: inline-block; margin-top: 25px; color: darkblue" href="page/end/register.html">新医生登记</a>
            </div>

        </div>
    </div>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/gVerify.js"></script>
<!--    <script src="../../js/js/login.js"></script>-->

<script type="text/javascript">
    // login();
    let  verifyCode;

    new Vue({
        el: "#wrapper",
        data: {
            user: {
                jobnum:"tom1",
                password:"123",
                code:""
            }
        },
        mounted() {

            window.addEventListener('keydown',this.keyDown);

            verifyCode = new GVerify({
                id: "picyzm",
                type: "blend"
            });
        },
        methods: {
            keyDown(e){
                //如果是回车则执行登录方法
                if(e.keyCode == 13){
                    // alert("1");
                    this.login();
                }
            },
            login() {
                // alert("jobnum"+this.user.jobnum);

                if (!this.user.jobnum) {
                    this.$message({
                        message: "请输入用户名",
                        type: "error"
                    });
                    return;
                }
                if (!this.user.password) {
                    this.$message({
                        message: "请输入密码",
                        type: "error"
                    });
                    return;
                }
                // if (!this.user.code) {
                //     this.$message({
                //         message: "请输入验证码",
                //         type: "error"
                //     });
                //     return;
                // }
                // let res = verifyCode.validate(this.user.code);
                // if (!res) {
                //     this.$message({
                //         message: "验证码错误",
                //         type: "error"
                //     });
                //     return;
                // }
                $.ajax({
                    url: "/user/login",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(this.user)
                }).then(res => {

                    if (res.code === '0') {
                        this.$message({
                            message: "登录成功",
                            type: "success"
                        });
                        sessionStorage.setItem("user", JSON.stringify(res.data));
                        setTimeout(() => {
                            location.href= "/page/end/mainui.html"
                        }, 1000)
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
            }
        }
    })

</script>
</body>
</html>
